<template>
  <div class="clearfix pc">
    <div class="header-line clearfix">
      <div class="con-width-1200 clearfix">
        <ul class="fxr r-menu">
          <li>
            <i class="fxl iconfont icon-baokan"></i>
            <router-link
              :to="{
                path: '/HospitalNewspaper',
                query: { channelCode: 'HospitalNewspaper' },
              }"
              >医院报刊
            </router-link>
          </li>
          <!-- <li>
            <i class="fxl iconfont icon-gongdan"></i>
            <a href="http://47.104.69.11/cms" target="_blank">管理端入口</a>
          </li> -->
        </ul>
      </div>
    </div>
    <div class="head-v3 header pos-rel" id="index">
      <div class="navigation-up clearfix">
        <div class="navigation-inner pos-rel clearfix">
          <div class="weixin pos-abs">
            <span class="fxr font">微信公众号</span>
            <img class="fxl img rad5" src="../assets/images/weixin.jpg" />
          </div>
          <img class="fxl pos-abs logo" src="../assets/images/logo.jpg" />
          <div class="fxr inp pos-rel">
            <i class="iconfont pos-abs icon-sousuo" @click="jump()"></i>
            <input
              v-model="keyWord"
              placeholder="请输入搜索关键词"
              @keydown="keydown"
            />
          </div>

          <div class="clear"></div>

          <div class="navigation-v3">
            <ul>
              <!-- 默认被选中项 -->
              <li class="nav-up-selected-inpage">
                <h2>
                  <a href="/">首页</a>
                </h2>
              </li>
              <!-- <li
                :class="i.id == 1 ? 'nav-up-selected-inpage' : ''"
                v-for="i in nevigatelist"
                :key="i.index"
                :_t_nav="i.nav"
                @mouseover="showHideTree()">
                <h2>
                  <a href="#">{{ i.label }}</a>
                </h2>
              </li> -->
              <li
                v-for="(i, index) in nevigatelist"
                :class="index == idx ? 'nav-up-selected' : ''"
                :key="i.index"
                :_t_nav="i.nav"
                @mouseenter="showTemp(index)"
              >
                <h2>
                  <a href="#">{{ i.label }}</a>
                </h2>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="navigation-down">
        <div
          v-for="(i, index) in navdetails"
          :key="i.index"
          :id="i.id"
          :class="
            idx == index
              ? ['nav-down-menu', 'menu-1', 'nav-up-selected']
              : ['nav-down-menu', 'menu-1']
          "
          :style="{ display: idx == index ? '' : 'none' }"
          @mouseleave="hideTemp"
          :_t_nav="i.id"
        >
          <div class="navigation-down-inner">
            <div class="fxl title">
              <H1>{{ i.label }}</H1>
              <h2>{{ i.id }}</h2>
            </div>
            <div class="fxl sub-menu">
              <ul class="clearfix">
                <li
                  v-for="item in i.childrenlist"
                  :key="item.index"
                  @mouseenter="changeActive($event)"
                  @mouseleave="removeActive($event)"
                >
                  <div v-if="item.title != ''">
                    <span
                      ><a @click="jumpArticleList(item)">{{
                        item.title
                      }}</a></span
                    >
                    <ul>
                      <li v-for="y in item.channelList" :key="y.index">
                        <a class="link" href="#" @click="jumpArticleList(y)">{{
                          y.title
                        }}</a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clear hei20"></div>
  </div>
</template>

<script src="../assets/js/vue.min.js"></script>
<script>
import _http from "../httpService";
import $ from "jquery";

export default {
  name: "Header",
  props: {},
  data() {
    return {
      keyWord: null,
      menu: [],
      /* 导航标题 */
      nevigatelist: [],
      /* 导航内明细列表 */
      navdetails: [],
      idx: -1,
    };
  },

  mounted() {},

  methods: {
    keydown(e) {
      if (e.key == "Enter") this.jump();
    },

    changeActive($event) {
      $event.currentTarget.className = "hover";
    },
    removeActive($event) {
      $event.currentTarget.className = "";
    },

    showHideTree: function () {
      var qcloud = {};
      $("[_t_nav]").hover(
        function () {
          var _nav = $(this).attr("_t_nav");
          clearTimeout(qcloud[_nav + "_timer"]);
          qcloud[_nav + "_timer"] = setTimeout(function () {
            $("[_t_nav]").each(function () {
              $(this)[
                _nav == $(this).attr("_t_nav") ? "addClass" : "removeClass"
              ]("nav-up-selected");
            });
            $("#" + _nav)
              .stop(true, true)
              .slideDown(200);
            console.log("down");
          }, 150);
        },
        function () {
          var _nav = $(this).attr("_t_nav");
          clearTimeout(qcloud[_nav + "_timer"]);
          qcloud[_nav + "_timer"] = setTimeout(function () {
            $("[_t_nav]").removeClass("nav-up-selected");
            $("#" + _nav)
              .stop(true, true)
              .slideUp(200);
            console.log("up");
          }, 150);
        }
      );
    },
    showTemp(index) {
      this.idx = index;
    },
    hideTemp() {
      this.idx = -1;
    },

    jump: function () {
      if (this.keyWord == "") {
        return;
      }

      this.$router.push({
        path: "/FullTextSearch",
        query: { keyWord: this.keyWord },
      });
    },

    jumpArticleList: function (item) {
      if (item.displayForm == "3") {
        this.$router.push({
          path: item.channelNameEn,
          query: { mokid: item.channelCode.split(":")[1]},
        });

        return
      }

      if (item.leaft == "1")
        this.$router.push({
          path: "/ArticleList",
          query: { channelCode: item.channelCode },
        });
    },
  },

  created() {
    // 初始化加载栏目等数据
    _http
      .get("/website/jcChannel/getChannelListByPc?parentCode=home")
      .then((response) => {
        console.log(response);
        this.nevigatelist = [];
        response.data.result.records.forEach((element) => {
          this.nevigatelist.push({
            label: element.channelName,
            id: element.channelNameEn,
            nav: element.channelCode,
          });
        });

        this.navdetails = [];
        response.data.result.records.forEach((element) => {
          this.navdetails.push({
            label: element.channelName,
            childrenlist: element.channelList,
            id: element.channelCode,
          });
        });
      })
      .catch((error) => console.log(error));
    // .finally(() => (this.loading = false));
  },
};
</script>

<style lang="scss">
@import "../assets/iconfont/iconfont.css";
@import "../assets/css/public.css";

.navigation-inner .weixin {
  right: -120px;
  text-align: center;
  width: 90px;
}
.navigation-inner .weixin span.font {
  padding-top: 3px;
  width: 10px;
  line-height: 14px;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}
.navigation-inner .weixin .img {
  width: 80px;
}

.head-v3 {
  position: relative;
  z-index: 100;
  min-width: 1200px;
}

.head-v3 .navigation-inner {
  margin: 0 auto;
  width: 1200px;
  position: relative;
}

.navigation-up {
  height: 41px;
  background: #fff;
}

.navigation-up .navigation-v3 {
  float: right;
  _margin-left: 10px;
}

.navigation-up .navigation-v3 ul {
  float: left;
}

.navigation-up .navigation-v3 li {
  float: left;
  font: normal 14px/41px "microsoft yahei";
  color: #333;
}

.navigation-up .navigation-v3 .nav-up-selected {
  background: transparent;
  color: #0eb4b6;
  border-bottom: 2px solid #0eb4b6;
  box-sizing: border-box;
}

.navigation-up .navigation-v3 li.nav-up-selected h2 a {
  color: #0eb4b6;
  font-weight: bold;
}

.navigation-up .navigation-v3 li h2 {
  font-weight: normal;
  padding: 0;
  margin: 0;
  font-size: 16px;
}

.navigation-up .navigation-v3 li h2 a {
  padding: 0px 15px;
  color: #333;
  display: inline-block;
  height: 41px;
  font-family: "microsoft yahei";
}

.navigation-down {
  position: absolute;
  top: 85px;
  left: 0px;
  width: 100%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.navigation-down .nav-down-menu {
  width: 100%;
  margin: 0;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 0px;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);
}

.navigation-down .nav-down-menu .navigation-down-inner {
  margin: auto;
  width: 1200px;
  position: relative;
}

.navigation-down-inner {
  .title {
    padding: 20px 0px 20px 0px;
    text-align: left;

    h1 {
      font-size: 25px;
      line-height: 40px;
      color: #0fb4b6;
    }

    h2 {
      font-size: 18px;
      color: #999;
      font-weight: normal;
    }
  }
}

.navigation-down .nav-down-menu dl {
  float: left;
  margin: 18px 80px 18px 0;
}

.navigation-down .sub-menu {
  width: 800px;
  text-align: left;
  font-size: 15px;
  margin: 20px 0px 50px 100px;
}

.navigation-down .sub-menu > ul > li {
  position: relative;
  width: 100%;
}

.navigation-down .sub-menu > ul > li > div > span {
  width: 180px;
  border-right: 1px solid #ddd;
  display: block;
  cursor: pointer;
  height: 100%;
  font-size: 16px;
  color: #666;
  line-height: 36px;
  padding-left: 12px;
}

.navigation-down .sub-menu > ul > li > div > ul {
  position: absolute;
  left: 200px;
  padding-left: 20px;
  top: 0px;
  width: 600px;
  display: none;
  z-index: 10;
}

.navigation-down .sub-menu > ul > li:hover > div > ul {
  display: block;
}

.navigation-down .sub-menu > ul > li:hover > div > ul > li > a {
  line-height: 30px;
}

.navigation-down .sub-menu > ul > li.hover > div > span {
  position: relative;
  color: #0fb4b6;
}

.navigation-down .sub-menu > ul > li.hover > div > span:before {
  position: absolute;
  content: "";
  left: 0px;
  top: 13px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #0fb4b6;
}

.navigation-down .sub-menu > ul > li.hover > div > span:after {
  position: absolute;
  content: "+";
  left: 170px;
  top: 0px;
  width: 0;
  height: 0;
  font-size: 18px;
}

.navigation-down .sub-menu .navigation-down .menu-1 dl {
  display: block;
  width: 100%;
  margin: 0px;
}

.navigation-down .menu-1 dt {
  font: bold 16px "microsoft yahei";
  color: #555;
  padding-bottom: 10px;
  border-bottom: 0px solid #999;
  margin-bottom: 10px;
}

.navigation-down .menu-1 dd a {
  color: #555;
  font: normal 14px/30px "microsoft yahei";
}

.navigation-down .menu-1 dd a:hover {
  color: #60aff6;
}

.navigation-down .menu-2 dd a,
.navigation-down .menu-3 dd a {
  color: #333;
  font: normal 16px "microsoft yahei";
}

.header-line {
  padding: 5px 0px;
  background: #f4f5f7;
  border-bottom: 1px solid #eaecef;

  .r-menu {
    li {
      float: left;
      margin-right: 20px;
      color: #a3acb8;

      i {
        margin: 2px 3px 0px 0px;
      }

      span {
        font-weight: bold;
      }
    }

    li:last-child {
      margin: 0px;
    }
  }
}

.header {
  padding: 10px 0px;

  .logo {
    left: 0px;
    height: 60px;
    margin: 10px 0px 5px 0px;
  }

  .menu-list {
    li {
      cursor: pointer;
      float: left;

      a {
        font-size: 16px;
        color: #404040;
        line-height: 30px;
        padding: 0px 5px;
        margin: 0px 10px;
        font-weight: 300;
      }

      a.router-link-exact-active {
        font-weight: bold;
        color: #0eb4b6;
        border-bottom: 2px solid #0eb4b6;
      }

      a:hover {
        color: #0eb4b6;
      }
    }

    li:last-child {
      padding: 0px 0px 0px 5px;
      margin: 0px 0px 0px 10px;
    }
  }

  .inp {
    input {
      display: block;
      border: 1px solid #c9d2e1;
      padding: 5px;
      color: #444;
      width: 260px;
    }

    i {
      right: 8px;
      top: 6px;
      color: #c9d2e1;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
</style>
